<script setup>
import {ref} from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
import AddAccount from "@/pages/Users/accounts/AddAccount.vue";
import EditAccount from "@/pages/Users/accounts/EditAccount.vue";
const accountsList = ref([
  {id: 1, email: 'admin@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: false},
  {id: 2, email: 'huayin.hsien@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: true},
  {id: 3, email: 'andre.waldemar@hydrogen.ai', role: 'Manager', password: '1234567ghy', show: false},
  {id: 4, email: 'security1@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
  {id: 5, email: 'security2@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
  {id: 11, email: 'admin@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: false},
  {id: 22, email: 'huayin.hsien@hydrogen.ai', role: 'Admin', password: '1234567ghy', show: true},
  {id: 33, email: 'andre.waldemar@hydrogen.ai', role: 'Manager', password: '1234567ghy', show: false},
  {id: 44, email: 'security1@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
  {id: 55, email: 'security2@hydrogen.ai', role: 'Security', password: '1234567ghy', show: false},
])
const AddAccountRef = ref(null)
const EditAccountRef = ref(null)
const role = ref('')
const AddShow = () => {
  AddAccountRef.value.showModal()
}
const editAccount = (val) => {
  role.value = val
  EditAccountRef.value.showModal()
}
</script>

<template>
  <div class="w-full h-[91px] flex flex-row items-center justify-between s2k:h-[121.3px] s4k:h-[182px] border-b border-solid border-[var(--grid)]">
    <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] flex flex-col">
      <span class="text-[2rem] text-[var(--theme-font-color)] font-[600] font-Inter">User Accounts</span>
      <span class="text-[1.13rem] text-[var(--theme-font-desc-color)] mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">Assign user roles to different users, or manage their account access.</span>
    </div>
    <div class="w-[190px] h-[41px] flex flex-row items-center justify-center bg-[#1C64F2] cursor-pointer rounded-md s4k:rounded-[16px] mr-[24px] s2k:mr-[32px] s4k:mr-[48px]
    s2k:w-[253px] s2k:h-[54.6px] s4k:w-[380px] s4k:h-[82px]" @click="AddShow">
      <svg-icon name="add" class="svgLogo s2ksvg s4ksvg ml-[3px] s4k:ml-[6px]" width="14px" height="14px"></svg-icon>
      <span class="text-[1.167rem] text-white font-Medium font-[400] ml-[10px] mr-[4px] s4k:ml-[20px] s4k:mr-[12px]">Add  User Account</span>
    </div>
  </div>
  <div class="w-[1200px] h-[592px] bg-[var(--theme)] m-auto mt-[32px] border border-solid border-[var(--grid)] rounded-[4px] s2k:w-[1600px] s4k:w-[2400px] s2k:h-[789.3px] s4k:h-[1184px] s2k:mt-[42.6px] s4k:mt-[68px] s2k:rounded-[6px] s4k:rounded-[8px]">
    <div class="text-[var(--theme-font-desc-color)] flex flex-col m-[32px_0_0_32px] s2k:m-[42.6px_0_0_42.6px] s4k:m-[64px_0_0_64px]">
      <span class="text-[1.66rem]">User Accounts</span>
      <span class="text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">5 accounts</span>
    </div>
    <div class="mt-[40px] list h-[410px] s2k:mt-[53.3px] s4k:mt-[80px] s2k:h-[546.6px] s4k:h-[820px]">
      <div class="flex flex-row w-[calc(100%_-_64px)] h-[81px] m-auto s2k:w-[calc(100%_-_85.3px)] s2k:h-[108px] s4k:w-[calc(100%_-_128px)] s4k:h-[162px] border-b border-solid border-[var(--grid)]" v-for="v in accountsList" :key="v.id">
        <div class="flex-[1] flex flex-col justify-center">
          <span class="text-[1rem] text-[var(--theme-font-desc-color)]">Email</span>
          <span class="text-[1.3rem] text-[var(--theme-font-color)] mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">{{v.email}}</span>
        </div>
        <div class="flex-[1] flex flex-col justify-center">
          <span class="text-[1rem] text-[var(--theme-font-desc-color)]">User Role</span>
          <span class="text-[1.3rem] text-[var(--theme-font-color)] mt-[3px] s2k:mt-[4px] s4k:mt-[6px]">{{ v.role }}</span>
        </div>
        <div class="flex-[1] flex flex-col justify-center relative">
          <span class="text-[1rem] text-[var(--theme-font-desc-color)]">Password</span>
          <input :type="v.show ? 'text' : 'password'" id="input" readonly class="cursor-default" v-model="v.password">
          <svg-icon :name="v.show ? 'eyeClose' : 'eye'" class="svgEdit cursor-pointer s2ksvg s4ksvg absolute right-[1%] top-[42%] " width="20px" height="15px"
                    @click="v.show = !v.show"></svg-icon>
        </div>
        <div class="flex-[0.6] flex flex-row justify-end items-center">
          <svg-icon name="copy" class="svgEdit cursor-pointer s2ksvg s4ksvg mr-[18px] s2k:mr-[24px] s4k:mr-[36px]" width="20px" height="20px"></svg-icon>
          <div class="w-[67px] h-[41px] s2k:w-[89.3px] s4k:w-[134px] s2k:h-[54.6px] s4k:h-[82px] flex bg-[var(--theme-button-bg)] rounded-[8px] cursor-pointer" @click="editAccount(v.role)">
            <span class="text-[1.13rem] text-[var(--theme-font-color)] m-auto">Edit</span>
          </div>
        </div>
      </div>
    </div>
    <AddAccount ref="AddAccountRef"/>
    <EditAccount ref="EditAccountRef" :role="role"/>
  </div>
</template>

<style scoped lang="scss">
.list::-webkit-scrollbar-track {
  background-color: var(--theme);
  border-radius: 10px;
}
#input {
  width: 80%;
  padding: 0;
  font-size: 1.13rem;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--theme);
  border-radius: 8px;
  margin-top: 6px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1.3) !important;
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(2) !important;
  }
  //.s4ksvgeye{
  //  transform: scale(1) !important;
  //}
}
</style>